<template>
  <div>
    <el-form ref="form" :model="form" class="form" :rules="rules" size="small" label-width="100px">
      <el-form-item label="邮件标题" prop="subject">
        <el-input v-model="form.subject" />
      </el-form-item>

      <el-form-item
        v-for="(domain, index) in tos"
        :key="domain.key"
        :label="'收件邮箱' + (index === 0 ? '': index)"
      >
        <el-input v-model="domain.value" style="width: 1000px"/>
        <el-button icon="el-icon-plus" @click="addDomain"/>
        <el-button style="margin-left:0;" icon="el-icon-minus" @click.prevent="removeDomain(domain)"/>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <Editor v-model="form.content":min-height="192"/>
      </el-form-item>

      <el-form-item class="top-right-btn">
        <el-button  :loading="loading"  size="small" type="primary" @click="doSubmit">发送邮件
        </el-button>
        <el-button   size="small" type="success" @click="openDialog">修改配置
        </el-button>
      </el-form-item>
    </el-form>

    <!--打开弹窗开始-->
    <el-dialog  v-dialogDrag :title="title" :close-on-click-modal="false" v-if="open" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="formConfig" :model="config" :rules="rulesConfig" style="margin-top: 6px;" size="small" label-width="100px">
        <el-form-item label="发件人邮箱" prop="fromUser">
          <el-input v-model="config.fromUser"  />
        </el-form-item>
        <el-form-item label="发件用户名" prop="user">
          <el-input v-model="config.user"  placeholder="Sender usernamex" />
        </el-form-item>
        <el-form-item label="邮箱密码" prop="pass">
          <el-input v-model="config.pass" type="password" placeholder="email Password" />
        </el-form-item>
        <el-form-item label="SMTP地址" prop="host">
          <el-input v-model="config.host" placeholder="SMTP address" />
        </el-form-item>
        <el-form-item label="SMTP端口" prop="port">
          <el-input v-model="config.port" placeholder="SMTP port" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  size="medium" type="primary" @click="doSubmitSave">保存配置</el-button>
      </div>
    </el-dialog>
    <!--打开弹窗结束-->
  </div>
</template>

<script>
  import {sendEmail,get,update} from "@/api/message/email/email";
  import {validEmail} from "@/utils/validate";
  import Editor from "@/components/Editor"

  export default {
    name: "index",
    components: { Editor },
    data() {
      return {
        title:'修改配置',
        // 是否显示弹出层
        open: false,
        loading: false,
        form: {
          subject: '',
          tos: [],
          content: ''
        },
        tos: [{
          value: ''
        }],
        rules: {
          subject: [
            {required: true, message: '标题不能为空', trigger: 'blur'}
          ]
        },
        config: { id: 1, fromUser: '', user: '', pass: '', host: '', port: '', sslEnable: '' },
        rulesConfig: {
          fromUser: [
            { required: true, message: '请输入发件人邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ],
          user: [
            { required: true, message: '请输入发件用户名', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          host: [
            { required: true, message: 'SMTP地址不能为空', trigger: 'blur' }
          ],
          port: [
            { required: true, message: 'SMTP端口不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      get(){
        this.loading = true
        let params=1
        get(params).then(res => {
          this.config=res.data
          this.loading = false
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      },
      //打开弹窗
      openDialog(){
        this.open=true
        this.get()
      },
      //发送邮件
      doSubmit() {
        const _this = this
        this.$refs['form'].validate((valid) => {
          this.form.tos = []
          if (valid) {
            let sub = false
            this.tos.forEach(function(data, index) {
              if (data.value === '') {
                _this.$message({
                  message: '收件邮箱不能为空',
                  type: 'warning'
                })
                sub = true
              } else if (validEmail(data.value)) {
                _this.form.tos.push(data.value)
              } else {
                _this.$message({
                  message: '收件邮箱格式错误',
                  type: 'warning'
                })
                sub = true
              }
            })
            if (sub) { return false }
            this.loading = true
            sendEmail(this.form).then(res => {
              _this.msgSuccess("发送成功");
              this.loading = false
            }).catch(err => {
              this.loading = false
              console.log(err.response.data.message)
            })
          } else {
            return false
          }
        })
      },
      //保存配置
      doSubmitSave(){
         this.$refs["formConfig"].validate(valid => {
           if (valid) {
            update(this.config).then(res => {

              this.msgSuccess("保存成功");
              this.open=false
            }).catch(err => {
              this.open=false
            })
          }
        })

      },
      addDomain() {
        this.tos.push({
          value: '',
          key: Date.now()
        })
      },
      removeDomain(item) {
        var index = this.tos.indexOf(item)
        if (index !== -1 && this.tos.length !== 1) {
          this.tos.splice(index, 1)
        } else {
          this.$message({
            message: '请至少保留一位联系人',
            type: 'warning'
          })
        }
      },
    }
  }
</script>

<style scoped>
.form{
  margin: 6px 20px;
}
</style>
